<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按下键盘发送请求</title>  <style>
    #result{
        width: 200px;
        height: 100px;
        border: solid 1px #90b;
    }
</style>

</head>
<body>
<div id="result"></div>
<script>
    const result=document.querySelector('div')
    //绑定键盘按下事件
    window.addEventListener('keydown',function () {

        const xhr=new XMLHttpRequest()
        xhr.open('GET','http://localhost:8000/json-server')
        // 设置响应体数据类型
        xhr.responseType='json'

        xhr.send()

        xhr.addEventListener('readystatechange',function () {
            if (xhr.readyState===4){
                if (xhr.status>=200&&xhr.status<300){
                    console.log(xhr.response)
                    //手动对数据进行转换
                    // let data =JSON.parse(xhr.response)
                    let data=xhr.response
                    console.log(data)
                    result.innerHTML=`${data.name}`
                }
            }
        })
    })
</script>
</body>
</html>